<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
    </h:head>
    <h:body style="text-align:left">

        <h:form id="form1">

            <p:growl id="messages" showDetail="true" life="10000" />

            <p:tabView>
                <p:tab title="Consultar">
                    <h:panelGrid columns="2" cellpadding="10">                        
                        <p:dataTable id="tablaClientes" paginatorAlwaysVisible="true" 
                                     var="obj" value="#{pedidoBean.listaPedidos}"  
                                     emptyMessage="No se han encontrado registros"
                                     rows="3" filteredValue="#{pedidoBean.listaPedidosFiltro}" 
                                     widgetVar="codigoFiltro" 
                                     paginator="true"
                                     paginatorPosition="bottom"                                     
                                     scrollable="true"  scrollWidth="true" scrollHeight="150"
                                     liveScroll="true">

                            <f:facet name="header">
                                <p:outputPanel>
                                    <h:outputText value="Buscar: " />
                                    <h:inputText id="globalFilter" onkeyup="PF('codigoFiltro').filter()" />
                                </p:outputPanel>
                            </f:facet>

                            <p:column  filterBy="#{obj.numero}" id="numero" headerText="Número">
                                <h:outputText value="#{obj.numero}" />
                            </p:column>

                            <p:column headerText="Fecha">
                                <h:outputText value="#{obj.fecha}" />
                            </p:column>

                            <p:column  filterBy="#{obj.cliente.nombre}" id="cliente" headerText="Ciente">
                                <h:outputText value="#{obj.cliente.nombre}" />
                            </p:column>

                            <p:column headerText="Observación">
                                <h:outputText value="#{obj.obs}" />
                            </p:column>

                            <p:column headerText="Accion">
                                <p:commandButton value="Modificar" action="#{pedidoBean.abrirFormActualizar()}"/> 
                                <p:commandButton value="Eliminar" action="#{pedidoBean.delete}"/>

                            </p:column>

                        </p:dataTable>                
                    </h:panelGrid>
                </p:tab>
                <p:tab title="Incluir">


                    <h:panelGrid columns="4" cellpadding="5">

                        <h:outputLabel  value="Numero:" />
                        <p:inputText value="0" id="numero" disabled="true"  />

                        <h:outputLabel value="Fecha:" />
                        <p:calendar value="#{pedidoBean.fecha}" mode="popup" showOn="button"/>

                        <h:outputLabel  value="Cliente:" />

                        <p:selectOneMenu value="#{pedidoBean.cliente.codigo}" >  
                            <f:selectItem itemLabel="Seleccione una opcion" itemValue="" /> 
                            <f:selectItems value="#{clienteBean.lista}" 
                                           var="clien" 
                                           itemLabel="#{clien.nombre}" itemValue="#{clien.codigo}"/>   
                        </p:selectOneMenu>   

                        <h:outputLabel  value="Observación:" />
                        <p:inputText value="#{pedidoBean.obs}" id="observacion"/>

                    </h:panelGrid>

                    <p:spacer height="10px;"/>
                    <!-- Define el panle grid                    -->
                    <p:panelGrid id="panelGridId" columns="10">
                        <h:outputLabel  value="Articulo: " />
                        <p:inputText  value="#{item.item}"/>
                        <h:outputLabel  value="Cantidad: " />
                        <p:inputText value="#{item.qty}"/>
                        <h:outputLabel value="Precio: " />
                        <p:inputText  value="#{item.price}"/>
                        <f:facet name="footer">
                            <h:commandButton value="Agregar" action="#{item.addAction}"/>
                        </f:facet>
                    </p:panelGrid>

                    <p:spacer height="15px;"/>

                    <p:panel id="idGrid" >

                        <p:dataTable id="dataTableIdItem" value="#{item.orderList}" var="o"  widgetVar="50"  editable="true"
                                     rows="5"
                                     paginator="true"
                                     paginatorPosition="bottom"                                     
                                     scrollable="true"  scrollWidth="true" scrollHeight="150">

                            <p:ajax event="rowEdit" listener="#{item.onEdit}" update=":form1:messages" /> 
                            <p:ajax event="rowEditCancel" listener="#{item.onCancel}" update=":form1:messages" />
                            
                            <p:column>
                                
                                <f:facet name="header"> 
                                    <h:outputText value="Articulo" /> 
                                </f:facet>
                                
                                <p:cellEditor> 
                                    <f:facet name="output"> 
                                        <h:outputText value="#{o.item}" /> 
                                    </f:facet> 
                                    <f:facet name="input"> 
                                        <p:inputText value="#{o.item}" style="width:100%"/> 
                                    </f:facet> 
                                </p:cellEditor>
                                
                            </p:column>

                            <p:column>
                                <f:facet name="header"> 
                                    <h:outputText value="Cantidad" /> 
                                </f:facet>
                                <p:cellEditor> 
                                    <f:facet name="output"> 
                                        <h:outputText value="#{o.qty}" /> 
                                    </f:facet> 
                                    <f:facet name="input"> 
                                        <p:inputText value="#{o.qty}" style="width:100%"/> 
                                    </f:facet> 
                                </p:cellEditor>
                            </p:column>

                            <p:column>
                                <f:facet name="header"> 
                                    <h:outputText value="Precio" /> 
                                </f:facet>
                                <p:cellEditor> 
                                    <f:facet name="output"> 
                                        <h:outputText value="#{o.price}" /> 
                                    </f:facet> 
                                    <f:facet name="input"> 
                                        <p:inputText value="#{o.price}" style="width:100%"/> 
                                    </f:facet> 
                                </p:cellEditor>
                            </p:column>   
                            
                            <p:column headerText="Opciones" style="width:50px"> 
                                <p:rowEditor /> 
                            </p:column>
                            
                        </p:dataTable>

                        <!-- Se define los botones          -->
                        <f:facet name="footer">
                            <h:commandButton value="Guardar" action="#{pedidoBean.insertar}" />  
                            <h:commandButton value="Actualizar" action="#{pedidoBean.actualizar}"/> 
                            <h:commandButton value="Anular" action="#{pedidoBean.anular}"/>
                        </f:facet>
                    </p:panel>


                </p:tab>                
            </p:tabView>
        </h:form>
    </h:body>
</html>